<template>
  <div>
    <div class="handle-box">
      <el-input v-model="pagination.id" placeholder="id查询" class="handle-input mrb10"  clearable ></el-input>
      <el-input v-model="pagination.articleTitle" placeholder="标题名称" class="handle-input mrb10" clearable ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="searchForbiddenWord()">搜索</el-button>
      <el-button type="success" @click="openDialog(null,0)">添加</el-button>
    </div>



    <el-table :data="photoList" border class="table" header-cell-class-name="table-header">
      <el-table-column fixed="right" header-align="center" align="center" min-width="150" label="操作">
        <template slot-scope="scope" >
          <!--          <el-button type="text" size="small" v-if="scope.row.allocation === 0" @click="useExpenseUser(scope.row)">分配公司</el-button>-->
          <!--          <el-button type="text" style="color:#1d953f" size="small" v-if="scope.row.allocation === 1" >已分配</el-button>-->
          <el-button type="text" size="small" @click="openDialog(scope.row,1)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="50" align="center"></el-table-column>
      <el-table-column prop="url" label="视频地址" align="center" width="300"  :formatter="formatLongField"></el-table-column>
      <el-table-column prop="url" label="视频展示" align="center" width="300"  :formatter="formatLongField">
        <template v-slot="scope">
          <video v-bind:src="scope.row.url" controls class="img"></video>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"  width="170" ></el-table-column>
      <el-table-column prop="articleTitle" label="标题" align="center"  width="300" ></el-table-column>
      <el-table-column prop="articleCover" label="封面" align="center" width="120">
        <template v-slot="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.articleCover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="tid" label="视频类型" align="center" width="100" ></el-table-column>
<!--      <el-table-column prop="type" label="类型" align="center"></el-table-column>-->
<!--      <el-table-column prop="remark" label="备注" align="center"></el-table-column>-->
      <!--        <el-table-column prop="phoneNumber" label="手机号" align="center"></el-table-column>-->
      <!--        <el-table-column prop="email" label="邮箱" align="center"></el-table-column>-->
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next"
                     :current-page="pagination.pageNum"
                     :page-size="pagination.pageSize"
                     :total="pagination.total"
                     @current-change="handlePageChange">
      </el-pagination>
    </div>



    <el-dialog title="添加图片地址"
               :visible.sync="photoDialog"
               width="100%"
               :before-close="handleClose"
               :append-to-body="true"
               destroy-on-close
               center>
      <div class="my-dialog">
<!--        <el-input placeholder="请输入排序ID" v-model="photoWall.id">-->
<!--          <template slot="prepend">排序ID</template>-->
<!--        </el-input>-->
        <el-input placeholder="请输入url" v-model="photoWall.url">
          <template slot="prepend">视频url地址</template>
        </el-input>
        <el-input placeholder="请输入视频标题"   v-model="photoWall.articleTitle">
          <template slot="prepend">视频标题</template>
        </el-input>
        <el-input placeholder="请输入背景地址"   v-model="photoWall.articleCover">
          <template slot="prepend">背景照片地址</template>
        </el-input>
          <el-select v-model="photoWall.tid" placeholder="请选类型">
            <el-option label="我的宝宝" value="0"></el-option>
            <el-option label="DJ姐姐" value="1"></el-option>
            <el-option label="极品钰足" value="2"></el-option>
            <el-option label="学姐系列" value="3"></el-option>
            <el-option label="卡哇伊" value="4"></el-option>
            <el-option label="嫩嫩系列" value="5"></el-option>
            <el-option label="丝滑舞蹈" value="6"></el-option>
            <el-option label="完美身材" value="7"></el-option>
            <el-option label="慢摇系列" value="8"></el-option>
            <el-option label="丝滑吊带" value="9"></el-option>
            <el-option label="清纯系列" value="10"></el-option>
            <el-option label="COS系列" value="11"></el-option>
            <el-option label="街拍系列" value="12"></el-option>
            <el-option label="精品变装" value="13"></el-option>
            <el-option label="极品萝莉" value="14"></el-option>
            <el-option label="你的欲梦" value="15"></el-option>
            <el-option label="甜美系列" value="16"></el-option>
            <el-option label="御丝系列" value="17"></el-option>
            <el-option label="帅哥鲜肉" value="18"></el-option>
            <el-option label="热舞系列" value="19"></el-option>
          </el-select>
        <el-input placeholder="视频类型ID值" :disabled="isDisabled"   v-model="photoWall.tid">
          <template slot="prepend">视频类型ID值</template>
        </el-input>
        <el-date-picker
          v-model="photoWall.createTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
          <template slot="prepend">日期时间</template>
        </el-date-picker>
<!--        <el-input type="number" placeholder="请输入整数，数字小的在前面"-->
<!--                  v-model="photoWall.priority">-->
<!--          <template slot="prepend">分类优先级</template>-->
<!--        </el-input>-->
<!--        <el-input placeholder="请输入备注" v-model="photoWall.remark">-->
<!--          <template slot="prepend">备注</template>-->
<!--        </el-input>-->
<!--        <div style="text-align: center">图片后缀</div>-->
<!--        <div class="myCenter">-->
<!--          <el-radio-group v-model="photoWall.type">-->
<!--            <el-radio-button :label="'.jpg'">jpg</el-radio-button>-->
<!--            <el-radio-button :label="'.png'">png</el-radio-button>-->
<!--            <el-radio-button :label="'.jpeg'">jpeg</el-radio-button>-->
<!--          </el-radio-group>-->
<!--        </div>-->
<!--        <div  style="text-align: center"> or</div>-->
<!--        <el-input placeholder="请输入文件后缀" v-model="photoWall.type" >-->
<!--          <template slot="prepend">自定义后缀</template>-->
<!--        </el-input>-->
      </div>

      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose()">取 消</el-button>
          <el-button type="primary" @click="saveSortEdit()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: true,
      photoDialog: false,
      photoList: [],
      sort: {},
      photoWall: {
        articleTitle:'',
        id: null,
        url: "",
        priority: null,
        max: null,
        min: null,
        remark: "",
      },
      pagination: {
        articleTitle:'',
        articleCover:'',
        pageNum: 1,
        pageSize: 5,
        total: 0,
        id: '',
        remark:'',
        recommendStatus: null,
        sortId: null,
        labelId: null
      },

    }
  },

  computed: {},

  watch: {},

  created() {
    //this.getPhotoWallInfo();
    //这才是我的搜索
    this.searchForbiddenWord();
  },

  mounted() {

  },

  methods: {
    toggleDisabled() {
      // 双击事件处理函数，切换禁用状态
      this.isDisabled = !this.isDisabled;
    },
    formatLongField(row, column) {
      // 返回截断后的字符串
      return row.url.substring(0, 35) + '...';
    },
//这是我的添加
    saveSortEdit() {
      if (
        // this.$common.isEmpty(this.photoWall.type) ||
        this.$common.isEmpty(this.photoWall.createTime) ||
        this.$common.isEmpty(this.photoWall.articleTitle) ||
        this.$common.isEmpty(this.photoWall.url)||
        this.$common.isEmpty(this.photoWall.articleCover)
        // this.$common.isEmpty(this.photoWall.min)
      ) {
        this.$message({
          message: "请完善所有分类信息！",
          type: "error"
        });
        return;
      }

      if (this.$common.isEmpty(this.photoWall.id)) {
        let url;
        // url = "/photoWall/toadd";
        url = "/webInfo/toadd"
        this.$http.post(url,this.photoWall)
          .then((res) => {
            if (res.msg=='执行成功'){
              this.$message({
                message: "添加成功！",
                type: "success"
              });
            }
            //刷新列表
            this.searchForbiddenWord();

            //this.getPhotoWallInfo();
            this.handleClose();
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      } else {
        let url;
        //url = "/photoWall/toupdate";
        url = "/webInfo/updateVidio";
        this.$http.post(url,this.photoWall)
          .then((res) => {
            if (res.msg=='执行成功'){
              this.$message({
                message: "修改成功！",
                type: "success"
              });
            }
            //刷新列表
            this.searchForbiddenWord();

            //this.getPhotoWallInfo();
            this.handleClose();
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      }
    },
    //打开添加页面
    openDialog(row,type) {
      this.photoDialog = true
      this.type = type;
      if (row!==null){
        this.photoWall = row
        console.log("这是我修改页面数据"+JSON.stringify(row))
      }
      // this.addOrUpdateProWords(row,type)
    },
    //这是我的分页
    handlePageChange(val) {
      this.pagination.pageNum = val;
      this.searchForbiddenWord();
    },
    //这是我对查询
    searchForbiddenWord(){
      let url;
      url = "/webInfo/getVidio";
      // 搜索禁用词
      this.$http
        .post(url,this.pagination)
        .then(res => {
          if (res.code === 200) {
            this.photoList = res.data.records;
            this.pagination.total = res.data.total;
          }
          else {
            this.$message.error(res.data.msg);
          }
        });
    },
    deleteHandle(id) {
      let url;
      // url = "/photoWall/todel";
      url = "/webInfo/delVidio";
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        center: true
      }).then(() => {
        this.$http.get(this.$constant.baseURL + url, {id: id}, true)
          .then((res) => {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            //刷新列表
            this.searchForbiddenWord();
           // this.getPhotoWallInfo();
            this.sort = {};
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '已取消删除!'
        });
      });
    },




    handleClose() {

      this.photoWall={
        id: null,
          url: "",
          type: 1,
          priority: null,
          max: null,
          min: null,
          remark: "",
      },

      this.photoDialog = false;
    },
    // getPhotoWallInfo() {
    //   this.$http.get("/photoWall/selectAll",this.pagination).then(res => {
    //       if (res.code === 200) {
    //         this.photoList = res.data.records;
    //         this.pagination.total = res.data.total;
    //       }
    //       else {
    //         this.$message.error(res.data.msg);
    //       }
    //     }).catch((error) => {
    //       this.$message({
    //         message: error.message,
    //         type: "error"
    //       });
    //     });
    // }
  }
}
</script>

<style scoped>
.img {
  max-width: 30%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}

.handle-box {
  margin-bottom: 5px;
}
.my-dialog > div {
  margin: 10px;
}

.my-dialog >>> input::-webkit-inner-spin-button {
  appearance: none;
}
</style>
